<template>
  <div id="viewQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="题目">
            <a-card v-if="question" :title="question.title">
              <a-descriptions title="判题条件" :column="{ xs: 1, md: 2, lg: 3 }">
                <a-descriptions-item label="内存限制:">
                  <a-tag>{{ question.judgeConfig.memoryLimit }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="时间限制:">
                  <a-tag>{{ question.judgeConfig.timeLimit }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制:">
                  <a-tag>{{ question.judgeConfig.stackLimit }}</a-tag>
                </a-descriptions-item>
              </a-descriptions>
              <MdViewer :value="question.content || ''" />
              <template #extra>
                <a-space>
                  <a-tag v-for="(tag, index) in question.tags" :key="index" color="green">
                    {{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="评论区" disabled>评论区</a-tab-pane>
          <a-tab-pane key="answer" title="答案">暂时不能查看答案</a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-form :model="form" layout="inline">
          <a-form-item label="编程语言" field="language" style="min-width: 240px">
            <a-select v-model="form.language" :style="{ width: '320px' }" placeholder="请选择编程语言">
              <a-option>java</a-option>
              <a-option>cpp</a-option>
              <a-option>go</a-option>
              <a-option>html</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor :value="form.code" :language="form.language" :handle-change="changeCode" />
        <a-divider size="0" />
        <a-button type="primary" style="min-width: 200px" @click="codeSubmit">提交代码</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineProps } from 'vue';
import { QuestionControllerService, QuestionSubmitAddRequest, QuestionSubmitControllerService, QuestionVO } from '../../../generated';
import message from '@arco-design/web-vue/es/message';
import CodeEditor from '@/components/CodeEditor.vue';
import MdViewer from '@/components/MdViewer.vue';
import { tag } from 'postcss-selector-parser';
import uesr from '@/store/uesr';

const question = ref<QuestionVO>();

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => ''
});

const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(props.id as any);
  if (res.code === 0) {
    console.log(res.data);
    question.value = res.data;
  } else {
    message.error('获取题目失败' + res.message);
  }
};

const form = ref<QuestionSubmitAddRequest>({
  language: 'java',
  code: ''
});

const changeCode = async (value: string) => {
  form.value.code = value;
};

/**
 * 提交代码
 */
const codeSubmit = async () => {
  if (!question.value?.id) {
    return;
  }
  const res = await QuestionSubmitControllerService.doQuestionSubmitUsingPost({
    ...form.value,
    questionId: question.value?.id
  });
  if (res.code == 0) {
    message.success('提交成功');
  } else {
    message.error('提交失败,' + res.message);
  }
};

/**
 * 页面加载时请求数据
 */
onMounted(() => {
  loadData();
});
</script>

<style scoped>
#viewQuestionView {
  max-width: 1280px;
  margin: 0 auto;
}
</style>
